<template>
    <el-container>
        <el-aside width="200px">
            <el-menu
                    default-active="2"
                    class="menu_tp"
                    :default-openeds="['1','2','4']"
                    :default-active="active_nav_at" :router="true" @select="handleSelect"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <span>HTTP测试</span>
                    </template>
                    <el-menu-item>配置元件</el-menu-item>
                    <el-menu-item index="testPage_HTTP">HTTP请求</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <span>TCP测试</span>
                    </template>
                    <el-menu-item @click="dialogVisible = true">新建tcp连接</el-menu-item>
                    <el-menu-item index="testPage_TCP">TCP请求</el-menu-item>
                </el-submenu>
                <el-menu-item index="testPage_UDP">UDP测试</el-menu-item>
                <el-submenu index="4">
                    <template slot="title">
                        <span>MQTT测试</span>
                    </template>
                    <el-menu-item @click="dialogVisible1 = true">新建mqtt连接</el-menu-item>
                    <el-menu-item index="testPage_MQTT_pub">mqtt发布</el-menu-item>
                    <el-menu-item index="testPage_MQTT_sub">mqtt订阅</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-main class="el_main_tp">
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-dialog
                title="新建TCP连接"
                :visible.sync="dialogVisible"
                width="45%"
                :before-close="handleClose">
            <el-form ref="tcpAdd" :model="tcpAdd" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="tcpAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="服务IP">
                    <el-input v-model="tcpAdd.tcpIp"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="tcpAdd.tcpPort"></el-input>
                </el-form-item>
                <el-form-item label="超时">
                    <el-input v-model="tcpAdd.tcpTimeout"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="tcpAdd.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
             </span>
        </el-dialog>
        <el-dialog
                title="新建TCP连接"
                :visible.sync="dialogVisible1"
                width="45%"
                :before-close="handleClose">
            <el-form ref="tcpAdd" :model="tcpAdd" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="tcpAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="服务IP">
                    <el-input v-model="tcpAdd.tcpIp"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="tcpAdd.tcpPort"></el-input>
                </el-form-item>
                <el-form-item label="超时">
                    <el-input v-model="tcpAdd.tcpTimeout"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="tcpAdd.tcpTimeout"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="tcpAdd.tcpTimeout"></el-input>
                </el-form-item>
                <el-form-item label="clientId">
                    <el-input v-model="tcpAdd.tcpTimeout"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
             </span>
        </el-dialog>
    </el-container>
</template>

<script>
    export default {
        name: "TestPage",
        data() {
            return {
                active_nav_at: 'testPage_HTTP',
                dialogVisible: false,
                dialogVisible1: false,
                tcpAdd: {
                    name: '',
                    tcpIp: '',
                    tcpPort: '',
                    tcpTimeout: '',
                    desc: ''
                }
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                //console.log("打开回调"+key, keyPath);
            },
            handleSelect(key, keyPath) {

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmit() {
                console.log('submit!');
                this.dialogVisible = false;
            },
            saveTcp(a) {

            }
        }
    }
</script>

<style scoped>
    .menu_tp {
        border-right: 0 !important;
    }

    .el_main_tp {
        border-left: 1px solid #eee;
    }
</style>
